<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="收款二维码"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top" />

    <div class="register-form">
      <van-cell-group>
        <van-cell class="flex-v-c" title="微信收款二维码">
          <van-uploader
            slot="right-icon"
            v-model="weChat"
            :max-count="1"
            :after-read="(file)=>{afterRead(file,'weChat')}"
            preview-size="3rem"
            upload-text="微信"
            @delete="(file,detail)=>{afterDelete(file,detail,'weChat')}"
          />
        </van-cell>
        <van-cell class="flex-v-c" title="支付宝收款二维码">
          <van-uploader
            slot="right-icon"
            v-model="alipay"
            :max-count="1"
            :after-read="(file)=>{afterRead(file,'alipay')}"
            preview-size="3rem"
            upload-text="支付宝"
            @delete="(file,detail)=>{afterDelete(file,detail,'alipay')}"
          />
        </van-cell>
      </van-cell-group>

      <div class="mtb-30 plr-20">
        <van-button type="danger" size="large" @click="submit">保存提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { upLoad } from 'api/upload'
import { getPayQrUrl, setPayQrUrl } from 'api/paymentAccount'

export default {
  data() {
    return {
      model: {
        weChat: {
          label: '微信收款二维码',
          value: ''
        },
        alipay: {
          label: '支付宝收款二维码',
          value: ''
        }
      },
      weChat: [],
      alipay: []
    }
  },
  created() {
    this.getPayQrUrl()
  },
  methods: {
    // 上传二维码
    afterRead(file, type) {
      upLoad({
        Content: this.$utils.getCaption(file.content, 'base64,'),
        FileType: this.$utils.getCaption(file.file.type, '/')
      }).then(res => {
        // console.log(res);
        if (res) {
          if (type == 'weChat') {
            this.model.weChat.value = res.Data.Path
          } else if (type == 'alipay') {
            this.model.alipay.value = res.Data.Path
          }
        }
      })
    },
    afterDelete(file, detail, type) {
      if (type == 'weChat') {
        this.model.weChat.value = ''
      } else if (type == 'alipay') {
        this.model.alipay.value = ''
      }
    },
    // 获取收款二维码
    getPayQrUrl() {
      getPayQrUrl().then(res => {
        // console.log(res);
        if (res) {
          if (res.Data.WechatQrUrl) {
            this.weChat.push({
              url: this.$webInfo.ImgDomain + res.Data.WechatQrUrl
            })
            this.model.weChat.value = res.Data.WechatQrUrl
          }
          if (res.Data.AlipayQrUrl) {
            this.alipay.push({
              url: this.$webInfo.ImgDomain + res.Data.AlipayQrUrl
            })
            this.model.alipay.value = res.Data.AlipayQrUrl
          }
        }
      })
    },
    submit() {
      const self = this
      // 表单验证
      if (self.$utils.formValidate(self.model).valid) {
        // 验证通过
        setPayQrUrl(self.model).then(res => {
          // console.log(res);
          if (res) {
            this.$toast({
              type: 'success',
              message: '保存成功',
              forbidClick: true,
              onClose: function() {
                self.$router.back()
              }
            })
          }
        })
      } else {
        this.$toast(self.$utils.formValidate(self.model).msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-uploader {
  /deep/ .van-uploader__upload,
  /deep/ .van-uploader__preview {
    margin: 0;
  }
}
</style>
